<template>
	<view class="bottom-input">
		<view></view>
		<u--input placeholder="请输入/扫描" border="bottom" v-model="code" prefixIcon="scan"
			prefixIconStyle="color: #fff;font-size: 56rpx" :focus="focus" color="#fff" placeholderStyle="color: #fff"
			@blur="noBlur" @change="getNewCode">
			<template slot="suffix">
				<u-button text="确定" type="success" size="small"></u-button>
			</template>
		</u--input>
	</view>
</template>

<script>
	export default {
		name: "scanInput",
		data() {
			return {
				focus: true,
				code: ''
			};
		},
		methods: {
			noBlur() {
				this.focus = false
				setTimeout(() => {
						this.focus = true
						// 新添加不失焦代码
						this.$nextTick(() => {
								if (!this.focus) {
									this.focus = true
								} else {
									this.focus = false
									this.focus = true
								}
							})
						}, 500)
				},
				getNewCode(value) {
					this.$emit('getCode', this.code)
				}
			}
		}
</script>

<style lang="scss">
	.bottom-input {
		position: fixed;
		bottom: 0;
		height: 96rpx;
		background-color: #2896ff;
		width: 100%;
	}

	/deep/ .u-border-bottom {
		border-bottom-width: 0.5px !important;
		border-color: #fff !important;
		border-bottom-style: solid;
	}
</style>